<div class="row mt-2">
    {% for article in articles %}
        <!-- 文章内容 -->
        <div class="col-4 mb-4">
            <!-- 卡片容器 -->
            <div class="card h-100">
                <!-- 标题 -->
                <h4 class="card-header">{{ article.title }}</h4>
                <!-- 摘要 -->
                <div class="card-body">
                    <p class="card-text">{{ article.body|slice:'100' }}...</p>
                </div>
                <!-- 注脚 -->
                <div class="card-footer">
                    <a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">阅读本文</a>
                    <!-- 显示浏览量 -->
                    <span>
                        <small class="col align-self-end" style="color: gray;">
                            浏览: {{ article.total_views }}
                        </small>
                    </span>

                </div>
            </div>
        </div>
    {% endfor %}

</div>